<template>
  <div class="setting-business">
    <!-- 导航栏 -->
    <mt-header fixed
               class="header">
      <router-link to="/homepage"
                   slot="left">
        <mt-button icon="back">
          <span class="header-text">入驻商务部</span>
        </mt-button>
      </router-link>
    </mt-header>
    <!-- 中间 -->
    <van-form class="container"
              @submit="onSubmit"
              ref="CompanyForm">
      <h3 class="top-text">
        <span>企业资料</span>
      </h3>
      <van-cell readonly
                clickable
                name="picker"
                :value="faren"
                @click="isUpdateFarenShow = true"
                placeholder="点击选择企业类型"
                title="*法人类型"
                is-link />
      <van-popup v-model="isUpdateFarenShow"
                 position="bottom">
        <van-picker show-toolbar
                    :columns="columns"
                    @confirm="onConfirm"
                    @cancel="isUpdateFarenShow=false" />
      </van-popup>
      <van-field name="companyname"
                 v-model="settingForm.companyname"
                 clearable
                 type="text"
                 :rules="settingRules.companyname"
                 placeholder="请输入企业名称"
                 label="*企业名称:" />
      <van-field name="modelname"
                 v-model="settingForm.modelname"
                 clearable
                 type="text"
                 :rules="settingRules.modelname"
                 placeholder="请输入显示名称"
                 label="*显示名称:" />
      <van-field v-model="settingForm.credit"
                 name="credit"
                 type="text"
                 maxlength="18"
                 :rules="settingRules.credit"
                 label="*社会信用代码:"
                 placeholder="请输入18位统一社会信用" />
      <van-cell title="*注册时间:"
                :value="zhucedate"
                clickable
                name="datetimePicker"
                @click="isUpdateDateShow = true"
                is-link />
      <van-popup v-model="isUpdateDateShow"
                 position="bottom">
        <van-datetime-picker v-model="currentDate"
                             type="date"
                             :min-date="minDate"
                             :max-date="maxDate"
                             @confirm="onConfirmTwo"
                             @cancel="isUpdateDateShow = false" />
      </van-popup>
      <van-field v-model="settingForm.companymoney"
                 name="money"
                 type="text"
                 maxlength="8"
                 req
                 :rules="settingRules.money"
                 placeholder="请输入金额"
                 label="*注册资本(万元):" />
      <van-cell title="*注册地区:"
                :value="zhucelocal"
                clickable
                name="area"
                @click="isUpdateFarenShowArea = true"
                is-link />
      <van-popup v-model="isUpdateFarenShowArea"
                 position="bottom">
        <van-area :area-list="areaList"
                  @confirm="onConfirmThree"
                  @cancel="isUpdateFarenShowArea = false" />
      </van-popup>
      <van-cell title="*企业类型:"
                :value="qiyeleixing"
                @click="isQiYeLeiXingShow=true"
                name="picker2"
                clickable
                readonly
                is-link />
      <van-popup v-model="isQiYeLeiXingShow"
                 position="bottom">
        <van-picker show-toolbar
                    :columns="columns2"
                    @confirm="onConfirmFour"
                    @cancel="isQiYeLeiXingShow=false" />
      </van-popup>
      <div class="all-text">*主营业务:
        <div class="all-button"
             v-for="item in text"
             :key="item.id">
          <van-button color="#000000"
                      native-type="button"
                      @click="selected(item.zhiwei,$event)"
                      round
                      :text="item.zhiwei"
                      size="mini"
                      plain
                      hairline></van-button>
        </div>
      </div>
      <!-- 底部按钮 -->
      <div class="next"
           @click="onSubmit">下一步</div>
    </van-form>
  </div>
</template>

<script>
import { getBusiness } from '@/api/SettingBusiness'
import dayjs from 'dayjs'
// 导入处理省市的文件
import AeraList from '../../utils/area.js'
export default {
  name: 'SettingBusiness',
  data () {
    return {
      text: [{
        id: 0,
        zhiwei: '月嫂'
      }, {
        id: 1,
        zhiwei: '育婴师'
      },
      {
        id: 3,
        zhiwei: '保洁/清洁'
      },
      {
        id: 4,
        zhiwei: '保姆'
      },
      {
        id: 5,
        zhiwei: '早教/托教'
      },
      {
        id: 6,
        zhiwei: '养老/陪护'
      },
      {
        id: 7,
        zhiwei: '家装/搬家'
      },
      {
        id: 8,
        zhiwei: '产康师'
      }],
      // 法人选择器默认值
      faren: '',
      // 注册时间默认值
      zhucedate: '',
      // 注册地区
      zhucelocal: '',
      // 企业类型选择器
      qiyeleixing: '',
      settingForm: {
        companyname: '湖南黑马有限公司',
        modelname: '',
        credit: '91430111MA4Q3AQW98',
        companymoney: ''
      },
      settingRules: {
        companyname: [{
          required: true,
          message: '企业名称不能为空'
        }, {
          pattern: /^([\u4e00-\u9fa5]{1,19})$/,
          message: '企业名称格式不正确'
        }],
        modelname: [{
          required: true,
          message: '显示名称不能为空'
        }, {
          pattern: /^([\u4e00-\u9fa5]{1,19})$/,
          message: '显示名称格式不正确'
        }],
        credit: [{
          required: true,
          message: '社会信用代码不能为空'
        }, {
          pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
          message: '社会信用代码格式不正确'
        }],
        companymoney: [{
          required: true,
          message: '金额不能为空'
        }, {
          pattern: /(^(([1-9]([0-9]+)?)|(0{1}))(\.[0-9]{1,2})?$)/,
          message: '金额格式不正确',
          trigger: 'blur'
        }]
      },
      // 控制高亮
      Acitvearr: [],
      corporate: '',
      housekeepingcompany: '',
      creditcode: '',
      popupVisible: false,
      value: '',
      columns: ['企业法人', '非企业法人'],
      columns2: ['有限责任公司', '股份有限公司'],
      isUpdateFarenShow: false,
      isUpdateDateShow: false,
      isUpdateFarenShowArea: false,
      isQiYeLeiXingShow: false,
      minDate: new Date(1990, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      // area省市区
      areaList: AeraList
    }
  },
  created () {
  },
  mounted () {

  },
  watch: {
  },
  methods: {
    // 校验发起提交
    async onSubmit () {
      try {
        await this.$refs.CompanyForm.validate()
        console.log('成功')
      } catch (err) {
        return console.log('验证失败', err)
      }
      const faren = [
        this.text,
        this.faren,
        this.zhucedate,
        this.zhucelocal,
        this.qiyeleixing,
        this.Acitvearr,
        this.settingForm]
      try {
        await getBusiness(faren)
        this.$toast('恭喜您入驻成功')
        this.$router.push('/Housekeeping-details')
      } catch (err) {
        return console.log('入驻失败,请查明原因', err)
      }
    },
    // 第一个选择器
    onConfirm (value) {
      this.faren = value
      this.isUpdateFarenShow = false
    },
    // 第二个选择器
    onConfirmTwo (value) {
      this.zhucedate = dayjs(value).format('YYYY-MM-DD')
      this.isUpdateDateShow = false
    },
    // 第三个选择器
    onConfirmThree (value) {
      const arr = value;
      const SelectProvinceName = arr[0].name; // 省
      const SelectCityName = arr[1].name; // 市
      const SelectCountyName = arr[2].name; // 区
      this.zhucelocal = [SelectProvinceName + SelectCityName + SelectCountyName]
      this.zhucelocal = this.zhucelocal.join('')
      // console.log(this.zhucelocal)
      this.isUpdateFarenShowArea = false
    },
    // 第四个选择器
    onConfirmFour (value) {
      this.qiyeleixing = value
      this.isQiYeLeiXingShow = false
    },
    // 选中高亮得到数据
    selected (zhiwei, e) {
      if (e.target.className.indexOf('active') === -1) {
        e.target.className = 'active van-button van-button__content van-button--default van-button--mini van-button--plain van-button--hairline van-button--round van-hairline--surround ' // 选中
        this.Acitvearr.push(zhiwei)
      } else {
        e.target.className = 'van-button van-button__content van-button--default van-button--mini van-button--plain van-button--hairline van-button--round van-hairline--surround ' // 选中'// 反选
        for (var i = 0; i < this.Acitvearr.length; i++) {
          if (this.Acitvearr[i] === zhiwei) {
            this.Acitvearr.splice(i, 1)
            break
          }
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.setting-business {
  position: relative;
  .header {
    height: 120px;
    line-height: 40px;
    background-color: #1196db;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 100);
    /deep/ .header-text {
      font-size: 32px;
    }
  }
  /deep/ .container {
    position: absolute;
    top: -40px;
    left: 28px;
    right: 10px;
    border-radius: 7px;
    margin-top: 120px;
    width: 704px;
    height: 1126px;
    background-color: rgba(255, 255, 255, 100);
    z-index: 2;
  }
  .top-text {
    line-height: 80px;
    font-size: 28px;
    span {
      border-left: 10px solid#1196db;
      margin-left: 20px;
    }
  }
  /deep/ .van-cell__title {
    color: #000;
    font-size: 26px;
    width: 200px;
  }
  /deep/ .van-cell__value {
    span {
      color: #000;
    }
  }
  .all-text {
    font-size: 26px;
    margin-left: 32px;
    height: 90px;
    line-height: 70px;
  }
  .all-button {
    margin-top: -20px;
    display: inline-block;
  }
  /deep/ .van-button {
    height: 48px;
    margin-right: 20px;
    .van-button__content {
      color: rgba(151, 145, 145, 100);
      width: 100%;
      flex-wrap: nowrap;
      // color: #fff;
    }
  }
  .next {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 110px;
    line-height: 110px;
    text-align: center;
    font-size: 28px;
    color: #ffffff;
    background-color: #1196db;
  }
  .active {
    height: 48px;
    .van-button__content {
      color: #1196db;
      width: 100%;
    }
  }
}
</style>
